<template>
    <div class="file">
      <div class="model" v-show="model" @click="model = false">
        <span v-if="modelState === '4'" style="color: red;font-size: large;">未通过原因: {{ modelMsg}}</span>
        <div class="model-show">
          <img :src="modelSrc" alt="">
        </div>
      </div>
        <span class="file_add clearfix">
          <div class="file_add-done" v-for="(item, index) in fileList" :key="index">
            <img :src="fileServerUrl + 's_' + item.fileId" alt="" @click="showImage(item)">
            <i v-if="item.state === '1'">新上传</i>
            <i v-if="item.state === '2'">待上传</i>
            <i v-if="item.state === '3'">已通过</i>
            <i v-if="item.state === '4'" style="color:red;background: white">未通过</i>
            <img v-if="item.state !== '3'" src="../../../assets/img/ico-red-close.png" alt="" @click="deleteFile(index, item.fileId)">
          </div>
          <Upload
            name="otherFile"
            action=""
            :format="['jpg','jpeg','png']"
            :show-upload-list="false"
            :before-upload="handleFront"
            >
            <Button type="ghost" icon="plus"></Button>
          </Upload>
        </span>
    </div>
</template>

<script>
    import request from '../../../utils/request'
    export default {
      props: ['dljgList'],
      data() {
        return {
          fileServerUrl: '/ect/outer/file/showFile.do?fileId=',
          model: false,
          modelSrc: '',
          modelMsg: '',
          modelState: '',
          symbol: Symbol(),
          fileList: []
        }
      },
      mounted() {
        this.fileList = this.dljgList
      },
      computed: {
        getSymbol() {
            return this.$store.state.imageBase.symbol
        },
        getBase64() {
          return this.$store.state.imageBase.base64
        },
        getFile() {
            return this.$store.state.imageBase.file
        }
      },
      watch: {
        getFile() {
            if (this.symbol === this.getSymbol) {
              this.uploadApi()
            }
        }
      },
      methods: {
          showImage(item) {
            this.modelSrc = item.url
            this.model = true
            this.modelState = item.state
            this.modelMsg = item.approveMsg
          },
          handleFront(file) {
              // 创建一个 FileReader 对象
              let reader = new FileReader()
              // readAsDataURL 方法用于读取指定 Blob 或 File 的内容
              // 当读操作完成，readyState 变为 DONE，loadend 被触发，此时 result 属性包含数据：URL（以 base64 编码的字符串表示文件的数据）
              // 读取文件作为 URL 可访问地址
              reader.readAsDataURL(file)
              reader.onloadend = e => {
                this.$store.dispatch('storeSymbol', { symbol: this.symbol })
                this.$store.dispatch('showCutImage', { base64: reader.result, sign: 'others', fileSize: file.size, fileName: file.name })
              }
              return false
          },
        deleteFile(index, fileId) {
          request.get('/interface/apply/cp/setup/upload/deleteUploadFile.do', {fileId: fileId}
          ).then(response => {
            if (response.data.result === 'error') {
              this.$ErrorAlert(response.data.message)
              return null
            }
            this.fileList.splice(index, 1)
          })
          request.delete('/outer/file/deleteFile.do', {fileId: fileId})
        },
        async uploadApi() {
          let uploadFile = this.getFile
          let formData = new FormData()
          formData.append('file', uploadFile)
          let fileUpload = await request.post('/outer/file/upload.do', formData)
          if (fileUpload.data.result === 'error') {
            this.$ErrorAlert(fileUpload.data.message)
            return false
          }
          let fileId = fileUpload.data.data
          let uploadData = {
            gid: sessionStorage.getItem('gid'),
            categoryType: '100',
            dataType: 101 + this.fileList.length, // 小类标识
            sn: this.fileList.length + 1, // 小类内文件的序号
            refCode: 101 + this.fileList.length, // 业务数据记录关联字段
            refText: '代理机构证明材料', // 业务数据标题
            fileId: fileId, // 文件主键
            contentType: uploadFile.type, // 文件类型
            fileSize: uploadFile.size, // 文件大小
            fileName: uploadFile.name // 文件名称
          }
          formData = new FormData()
          formData.append('data', JSON.stringify(uploadData))
          let respData = await request.post('/interface/apply/cp/setup/upload/saveUploadFile.do', formData)
          if (respData.data.result === 'error') {
            this.$ErrorAlert(respData.data.message)
            return
          }
          let upload = {
            fileId: fileId,
            state: '1'
          }
          this.fileList.push(upload)
          return fileId
        }
      }
    }
</script>

<style lang="scss">
    .file {
        line-height: 2;
        padding: 0.25rem 0.5rem;
        border: 1px solid #dddee1;
        margin-bottom: 0.54rem;
        &_name {
            display: block;
            em {
                color: #aaa;
                font-size: 0.5rem;
            }
        }
        &_add {
            >div {
                float: left;
                margin: 0.25rem 0.54rem 0.25rem 0;
                button {
                    position: relative;
                    height: 2.5rem;
                    width: 4rem;
                    padding: 0;
                    text-align: center;
                    color: #aaa;
                    &:hover {
                        color: #aaa;
                        border-color: #dddee1;
                    }
                    i {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate3d(-50%, -50%, 0);
                        font-size: 1rem;
                        color: #aaa;
                    }
                    span {
                        display: inline-block;
                        margin-top: 30%;
                        margin-left: 0 !important;
                    }
                }
                ul {
                    margin-top: 0;
                }
            }
            &-done {
                height: 2.5rem;
                width: 4rem;
                position: relative;
                img {
                    &:first-child {
                        height: 2.5rem;
                        width: 4rem;
                    }
                    &:last-child {
                        position: absolute;
                        top: 0;
                        right: 0;
                        transform: translate3d(40%, -40%, 0);
                        width: 1rem;
                    }
                }
                i {
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    color: #fff;
                    background: #6ece1a;
                    font-size: 0.43rem;
                    line-height: 1.5;
                }
            }
        }
        .tip {
            font-size: .12rem;
            color: red;
        }
      .model {
        position: fixed;
        z-index: 10;
        width: 100vw;
        height: 100vh;
        overflow: auto;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.8);
      }
      .model-show {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 80vh;
      }
      .model img {
        display: block;
        margin: auto;
        max-width: 80%;
        user-select: none;
        background-position: 0px 0px, 10px 10px;
        background-size: 20px 20px;
        background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%), linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
      }
    }
</style>
